<template>
	<page-card title="合同信息表管理">
		<div class="table-page-search-wrapper">
			<template>
				<a-form layout="inline"
								:form="form">
					<a-row type="flex"
								 :gutter="[16, 16]">
						<a-col :span="10">
							<a-form-item label="合同名称"
													 layout="inline">

								<a-input v-model="queryParam.contractName"
												 v-decorator="
                    [
                      'contractName',
                    ]" />
							</a-form-item>
						</a-col>
						<a-col :span="10">
							<a-form-item label="合同编号"
													 layout="inline">

								<a-input v-model="queryParam.contractId"
												 v-decorator="[
                    'contractId'
                  ]"
												 layout="inline" />

							</a-form-item>
						</a-col>
					</a-row>

					<a-row type="flex"
								 :gutter="[16,16]">
						<a-col :span="10">
							<a-form-item label="签订日期">
								<a-date-picker v-model="queryParam.startDate"
															 v-decorator="['startDate']" />-
								<a-date-picker v-model="queryParam.endDate"
															 v-decorator="['endDate']" />
							</a-form-item>
						</a-col>

						<a-col :span="10">
							<a-form-item label="项目类型">
								<a-select v-model="queryParam.proType"
													v-decorator="
                     [
                    'proType',
                  ]">
									<a-select-option value="1"> 大型 </a-select-option>
									<a-select-option value="2"> 中型 </a-select-option>
									<a-select-option value="3"> 小型 </a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
					</a-row>

					<!--button-->
					<a-row type="flex"
								 style="margin-bottom: 20px"
								 justify="end">
						<a-button type="primary"
											style="margin-right: 20px"
											icon="search"
											@click="search()">
							查询
						</a-button>
						<br />

						<a-button type="danger"
											style="margin-right: 20px"
											icon="delete"
											@click="handleReset">
							重置
						</a-button>

						<br />

						<a-button type="primary"
											style="margin-right: 20px"
											icon="plus"
											@click="handleSave()">
							新增
						</a-button>

					</a-row>
				</a-form>
			</template>

			<a-row type="flex"
						 style="margin-bottom: 20px"
						 justify="end">
				<a-col flex="1"> </a-col>
				<template> </template>
			</a-row>
		</div>

		<a-table :columns="columns"
						 :rowKey="(record, index) => index"
						 :data-source="data"
						 @change="handleTableChange"
						 :pagination="pagination">

			<span slot="action"
						slot-scope="text, record">
				<template v-if="hasPermission('edit')">
					<a @click="handleEdit(record.id)">编辑</a>
				</template>

				<template v-if="hasPermission('delete')">
					<a-divider type="vertical" />
					<a-popconfirm title="确定要删除吗？"
												ok-text="是"
												cancel-text="否"
												@confirm="handleDelete(record.id)">
						<a href="javascript:;">删除</a>
					</a-popconfirm>
				</template>
			</span>
		</a-table>
	</page-card>
</template>
<script>
import { contractList, contractDel } from '@/api/contract'
import {
	PAGINATION,
	TABLE_STATUS_CELL
} from '@zt/zongheng-pro/framework/constants'

export default {
	data() {
		return {
			num: 0,
			form: this.$form.createForm(this),
			//-----------
			pagination: PAGINATION,
			statusCell: TABLE_STATUS_CELL,
			queryParam: {},
			data: {},
			columns: [
				{
					title: '序号',
					dataIndex: 'num'
				},
				{
					title: '合同名称',
					dataIndex: 'contractName'
				},
				{
					title: '合同编号',
					dataIndex: 'contractId'
				},
				// {
				//   title: "合同金额",
				//   dataIndex: "contractAnt",
				// },
				{
					title: '签订日期',
					dataIndex: 'signDate'
				},
				// {
				//   title: "合同日期",
				//   dataIndex: "contractDate",
				// },
				// {
				//   title: "甲方单位",
				//   dataIndex: "coopUnit",
				// },
				// {
				//   title: "联系人",
				//   dataIndex: "contacts",
				// },
				// {
				//   title: "联系电话",
				//   dataIndex: "contactNumber",
				// },
				{
					title: '项目类型',
					dataIndex: 'proType'
				}
				// {
				//   title: "项目规模",
				//   dataIndex: "proSca",
				// },
				// {
				//   title: "客户经理",
				//   dataIndex: "customerManeger",
				// },
				// {
				//   title: "承担部门",
				//   dataIndex: "unitA",
				// },
				// {
				//   title: "项目经理",
				//   dataIndex: "projectManeger",
				// },
				// {
				//   title: "备注",
				//   dataIndex: "detail",
				// },
			]
		}
	},
	created() {
		if (this.hasPermissions('edit', 'delete')) {
			this.columns.push({
				title: '操作',
				width: 130,
				align: 'center',
				scopedSlots: { customRender: 'action' }
			})
		}
	},
	activated() {
		this.load()
	},

	computed: {
		// formItemLayout() {
		//   const { layout } = this.form;
		//   return layout === "horizontal"
		//     ? {
		//         labelCol: { span: 4 },
		//         wrapperCol: { span: 14 },
		//       }
		//     : {};
		// },

		buttonItemLayout() {
			const { layout } = this.form
			return layout === 'horizontal'
				? {
						wrapperCol: { span: 14, offset: 4 }
				  }
				: {}
		}
	},
	methods: {
		handleReset() {
			this.form.resetFields()
			this.queryParam = {}
			search()
		},

		search() {
			console.log('执行search方法')
			this.pagination.current = 1
			this.load()
		},

		load() {
			this.queryParam.currPage = this.pagination.current
			this.queryParam.pageSize = this.pagination.pageSize
			contractList({ ...this.queryParam }).then((response) => {
				this.data = response.list

				//遍历后端接口传入的数组，获取签订日期和合同日期，进行字符串处理
				for (let i = 0; this.data[i] != null; i++) {
					this.data[i].num = i + 1
					//处理日期格式
					this.data[i].signDate = this.data[i].signDate.split(' ')[0]
					this.data[i].contractDate = this.data[i].contractDate.split(' ')[0]
					//处理项目类型
					if (this.data[i].proType == 1) {
						this.data[i].proType = '开发项目'
					} else {
						this.data[i].proType = '运维项目'
					}
				}
				this.pagination.current = response.currPage
				this.pagination.total = response.totalCount
				this.pagination.pageSize = response.pageSize
			})
		},

		handleTableChange(pagination, filters, sorter) {
			this.pagination = pagination
			this.load()
		},

		handleSave() {
			this.$router.push({
				path: '/contract/add'
			})
		},

		handleEdit(id) {
			this.$router.push({
				path: 'edit',
				query: {
					id: id
				}
			})
		},

		handleDelete(id) {
			const data = []
			data.push(id)
			contractDel(data).then(() => {
				this.message.success('删除成功')
				this.load()
			})
		}
	}
}
</script>
